<template>
	<view class="mapbox" v-if="isCollapsed">
		<view class="city">
			<view class="chengDu"><text class="i"></text><text>成都</text></view>
			<view class="duJiangYan"><text class="a"></text><text>都江堰</text></view>
			<view class="yingXui"><text class="a"></text><text>映秀</text></view>
			<view class="liXian"><text class="a"></text><text>理县</text></view>
			<view class="siGu"><text class="a"></text><text>四姑娘山</text></view>
			<view class="shuangQiaoGou"><text class="a"></text><text>双桥沟</text></view>
			<view class="danBaXain"><text class="i"></text><text>丹巴县</text></view>
			<view class="jinChuanXain"><text class="i"></text><text>金川县</text></view>
			<view class="zhuoKe"><text class="a"></text><text>卓克基土司官寨</text></view>
			<view class="wengDa"><text class="a"></text><text>翁达</text></view>
			<view class="seDaXain"><text class="i"></text><text>色达县</text></view>
			<view class="luHuoXain"><text class="i"></text><text>炉霍县</text></view>
			<view class="ganZiXain"><text class="i"></text><text>甘孜县</text></view>
			<view class="xinLongXain"><text class="i"></text><text>新龙县</text></view>
			<view class="liTangXain"><text class="i"></text><text>理塘县</text></view>
			<view class="tuErShan"><text class="a"></text><text>兔儿山</text></view>
			<view class="haiZiShan"><text class="a"></text><text>海子山</text></view>
			<view class="daoChengXain"><text class="i"></text><text>稻城县</text></view>
			<view class="riWaZhen"><text class="a"></text><text>日瓦镇</text></view>
			<view class="daoChengYaDing"><text class="a"></text><text>稻城亚丁</text></view>
			<view class="tianLu"><text class="a"></text><text>天路十八弯</text></view>
			<view class="yaJiangXian"><text class="a"></text><text>雅江县</text></view>
			<view class="xinDuQiao"><text class="i"></text><text>新都桥</text></view>
			<view class="kangDingXian"><text class="i"></text><text>康定县</text></view>
			<view class="luDingXian"><text class="i"></text><text>泸定县</text></view>
			<view class="yaAnShi"><text class="i"></text><text>雅安市</text></view>
			<view class="yuZiXi"><text class="a"></text><text>鱼子西</text></view>
			<view class="taGong"><text class="a"></text><text>塔公草原</text></view>
			<view class="moShi"><text class="a"></text><text>墨石公园</text></view>
			<view class="jiaGengBa"><text class="a"></text><text>甲根坝</text></view>
			<view class="shaDe"><text class="a"></text><text>沙德</text></view>
			<view class="yueLiangHu"><text class="a"></text><text>月亮湖</text></view>
			<view class="gongGa"><text class="a"></text><text>贡嘎雪山</text></view>
			<view class="shangMuJu"><text class="a"></text><text>上木居</text></view>
			<view class="yaHa"><text class="a"></text><text>雅哈垭口</text></view>

			<view class="woLong"><text class="a"></text><text>卧龙</text></view>
			<view class="wenChuanXian"><text class="a"></text><text>汶川县</text></view>
			<view class="maoXian"><text class="i"></text><text>茂县</text></view>
			<view class="songPanXian"><text class="i"></text><text>松潘县</text></view>
			<view class="songPanGuzhen"><text class="a"></text><text>松潘古镇</text></view>
			<view class="huangLong"><text class="a"></text><text>黄龙</text></view>
			<view class="juiZhaiGou"><text class="a"></text><text>九寨沟</text></view>
			<view class="ruoErGaiXian"><text class="a"></text><text>若尔盖县</text></view>
			<view class="jiuQu"><text class="a"></text><text>九曲黄河第一湾</text></view>
			<view class="ruoEr"><text class="a"></text><text>若尔盖大草原</text></view>
			<view class="hongYuanXian"><text class="a"></text><text>红原县</text></view>
			<view class="yueLiangWan"><text class="a"></text><text>月亮湾</text></view>
			<view class="taoPingQiangZhai"><text class="i"></text><text>桃坪羌寨</text></view>

			<view class="jiaJu"><text class="a"></text><text>甲居藏寨</text></view>
			<view class="yaLaXueShan"><text class="a"></text><text>雅拉雪山</text></view>
			<view class="muYaDaSi"><text class="a"></text><text>木雅大寺</text></view>
			<view class="geDiLaMu"><text class="a"></text><text>格地拉姆</text></view>
			<view class="siDingCuo"><text class="a"></text><text>斯丁措</text></view>
			<view class="muGeCuo"><text class="a"></text><text>木格措</text></view>
			<view class="hongHaiZi"><text class="a"></text><text>红海子</text></view>
		</view>
		<view class="mapallbox">
			<canvas canvas-id="canvasCD" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasDJY" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasLX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSQG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasDBX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasJCX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasZK" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasWD" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasWDLH" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasLH" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasGZ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasXL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasLT" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasTES" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasHZS" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasDCX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasRWZ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasLTX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasTL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYJX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasXDQ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasKDX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasLDX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYAS" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasXDQYZX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYZX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasTG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasXDQJGB" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasJGB" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSD" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSDGG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasGG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSMJ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYH" class="curve-canvas"></canvas>

			<canvas canvas-id="canvasCDWL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasWL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasWC" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasMX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSP" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSPGZHL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSPGZJZG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSPGZREG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasREG" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasJQ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasRE" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasHYX" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYLW" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasXP" class="curve-canvas"></canvas>

			<canvas canvas-id="canvasJJ" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYLXS" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasYL" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasMYDS" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasGDLM" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasSDC" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasMGC" class="curve-canvas"></canvas>
			<canvas canvas-id="canvasHHZ" class="curve-canvas"></canvas>
		</view>
		<view class="LineSelection">
			<view @click="Great">川西大环线</view>
			<view @click="Small">川西小环线</view>
			<view @click="GeNie">格聂大环线</view>
			<view>九寨环线</view>
		</view>
	</view>
	<view class="Placeholder" v-if="!isCollapsed">
	</view>
	<view class="Content">
		<view class="RichText">
			雪山脚下，对话神山

			青藏高原因为集中了为数众多的大小雪山，也被称作”雪域”。雪山，已经成为了藏地的象征符号

			藏族人敬畏自然、热爱自然，尤其对雪山别有情感。但凡是常年积雪的雪山，一般都会被奉为神山，成为人们倾吐心声、祈求护佑的对象。他们彰显出一种绝对的尊严和力量山顶宁静的积雪令每个人都为之着迷，也让人对高处心驰神往。

			天人之际 & 穿越三江并流:守候梅里主峰卡瓦格博，期待日照金山的胜景;
			<view class="receiveImg" @click="collapseContent">
				<image src="../../static/home/BUTTON.png" mode=""></image>
			</view>
		</view>
		<!-- <describeCardVue></describeCardVue> -->
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { yellowBack, redBack, greenBack, draw } from './map'; 
// import describeCardVue from '../components/describeCard.vue';



// 川西大环线展开内容
const Great =  () => {
	isCollapsed.value = true;
	yellowBack.value = '#eea32e';
	redBack.value = '#6a6867';
	greenBack.value = '#6a6867';
	draw();
};

// 川西大环线展开内容
const Small =  () => {
	isCollapsed.value = true;
	redBack.value = '#b63839';
	greenBack.value = '#6a6867';
	yellowBack.value = '#6a6867';
	draw();
};

// 格聂大环线展开内容
const GeNie =  () => {
	isCollapsed.value = true;
	greenBack.value = '#3be375';
	redBack.value = '#6a6867';
	yellowBack.value = '#6a6867';
	draw();
};
// 折叠内容
const isCollapsed = ref(true); 
const collapseContent = () => {
	isCollapsed.value = !isCollapsed.value; 
	console.log('isCollapsed.value',isCollapsed.value);
	redBack.value = '#6a6867';
	greenBack.value = '#6a6867';
	yellowBack.value = '#6a6867';
	draw();
};

onMounted(() => {
  draw(); 
});
</script>


<style lang="scss" scoped>
	@import url('../map/map.css');
	.LineSelection{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0%, -50%);
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		view{
			width: 250rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			color: rgba(55, 106, 237, 1);
			text-align: center;
			line-height: 80rpx;
		}
	}
	.Placeholder{
		height: 170rpx;
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 5;
		background-color: #f5f6f7;
		margin-bottom: 4vh;
	}
	.Content {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		background-color: #f5f6f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		margin-top: -4vh;
		overflow: hidden;
		.RichText {
			width: 100vw;
			min-height: fit-content;
			border-radius: 33rpx;
			background: rgba(140, 140, 140, 0.1);
			backdrop-filter: blur(30rpx);
			padding: 20rpx 16rpx;
			box-sizing: border-box;

			.receiveImg {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 26rpx;
					height: 18rpx;
				}
			}
		}
	}
</style>